<style lang="scss" src="./index.scss"></style>
<template>
    <main class="base-layout-main">
        <base-layout-header class="base-layout-header"></base-layout-header>
        <section class="base-layout-body">
            <slot></slot>
            <main
                class="base-page-wrapper"
                v-loading="ajaxLoader"
                :element-loading-text="ajaxLoaderText"
            >
                <transition name="base-layout-toggle-transition" model="out-in">
                    <keep-alive :exclude="/(NotAlive)$/gi">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </main>
        </section>
    </main>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Provide, Watch, Ref } from "vue-property-decorator";
import BaseLayoutHeader from "@core/public/header/index.vue";

import { State } from "vuex-class";

@Component({
    components: {
        BaseLayoutHeader
    }
})
export default class BaseContainer extends Vue {
    @Ref() readonly baseTabMenuRef!: any;
    @State("tabList") tabMenuList: any;
    @State("ajaxLoader") ajaxLoader: any;
    @State("ajaxLoaderText") ajaxLoaderText: any;

    async logout() {
        const response = await this.$store.dispatch("logout");
        console.log(response);
        this.$router.push("/auth/login");
    }

    @Provide("handleCurrentTabClose")
    handleCurrentTabClose(url: string) {
        this.baseTabMenuRef.handleCurrentTabClose(url);
    }

    @Provide("setCurrentName")
    setCurrentName(val: string) {
        this.baseTabMenuRef.setCurrentName(val);
    }

    @Provide("changeLoadText")
    // changeLoadText() {
    //     this.ajaxLoaderText = "附件正在下载...";
    // }

    // @Provide("recoverLoadText")
    // recoverLoadText() {
    //     this.ajaxLoaderText = "";
    // }

    @Watch("$route", { immediate: true, deep: true })
    on$routeChange(to: any) {
        if (to.meta.isTab) {
            const _index = this.tabMenuList.findIndex(
                (cur: any) => cur.name === to.name
            );
            this.$store.dispatch("handleTabList", {
                item: to,
                index: _index === -1 ? this.tabMenuList.length - 1 : _index,
                type: _index === -1 ? "add" : "update"
            });
            this.setCurrentName(to.name);
        }
    }
}
</script>
